<template>
	<view class="head-box flex-lr">
		<view class="info-box flex-lr">
			<view class="head-img-wrap flex-center" @click="handleHeadClick">
				<image class="img" :src="avatarUrl" mode="aspectFill"></image>
			</view>
			<view class="head-news">
				<view class="name text-overflow">{{ userName }}</view>
				<view class="flex-l">
					<image class="img" :src="userInfo.level === 1 ? '/static/img/level1.png' : '/static/img/level2.png'" mode="aspectFill"></image>
					<view>{{ userInfo.user_id }}</view>
				</view>
			</view>
		</view>
		<view class="flex-r">
			<view class="money-content flex-l mr16">
				<image class="img" src="/static/img/gold.png" mode="aspectFill"></image>
				<view class="text-overflow" style="font-size: 10px; transform: scale(0.9); margin-left: 0px;">{{ goldAmount }}</view>
			</view>
			<view class="money-content flex-l">
				<image class="img" src="/static/img/utsd.png" mode="aspectFill"></image>
				<view class="text-overflow" style="font-size: 10px; transform: scale(0.9); margin-left: 0px;">{{ utsdAmount }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { userApi } from '@/request/user'
import { mapState } from 'vuex'
import projectConfig from '@/config/project.json'

export default {
	name: 'HeadBox',
	props: {
		avatar: {
			type: String,
			default: ''
		},
		userName: {
			type: String,
			default: ''
		},
		userLevel: {
			type: Number,
			default: 1
		},
		goldAmount: {
			type: String,
			default: '0.00'
		},
		utsdAmount: {
			type: String,
			default: '0.00'
		}
	},
	computed: {
		...mapState('user', ['userInfo', 'friendHomeMode']),
		avatarUrl() {
			return this.avatar ? this.avatar : '/static/img/head.png'
		}
	},
	mounted() {
	},
	methods: {
		handleHeadClick() {
			if (!this.friendHomeMode) {
				this.$emit('head-click');
			}
		}
	}
}
</script>

<style scoped lang="scss">
.head-box {
	width: 100%;
	padding: 0 14px;
	box-sizing: border-box;
	position: fixed;
	// z-index: 200;
	
	.info-box {
		width: 142px;
		height: 48px;
		background: rgba(0, 0, 0, 0.4);
		border-radius: 10px;
		
		.head-img-wrap {
			width: 55px;
			height: 55px;
			margin-top: -2px;
			margin-left: -3px;
			background: #b95a3d;
			border: 2px solid #f8d286;
			border-radius: 12px;
			padding: 2px;
			box-sizing: border-box;
			overflow: hidden;
			
			.img {
				width: 100%;
				height: 100%;
			}
		}
		
		.head-news {
			width: calc(100% - 55px);
			padding: 0 6px;
			box-sizing: border-box;
			color: #fffae7;
			font-size: 13px;
			font-weight: 700;
			
			.name {
				width: 100%;
				font-size: 17px;
				line-height: 17px;
				margin-bottom: 5px;
				text-align: left;
			}
			
			.img {
				width: 19px;
				height: 24px;
				margin-right: 4px;
			}
		}
	}
	
	.money-content {
		max-width: 135px;
		height: 30px;
		background: #fffae7;
		border: 2px solid #f8d286;
		border-radius: 12px;
		padding: 0 9px;
		box-sizing: border-box;
		color: #b95a3d;
		font-size: 15px;
		font-weight: 700;
		
		&.mr16 {
			margin-right: 8px;
		}
		
		.img {
			width: 20px;
			min-width: 20px;
			height: 20px;
			margin-right: 2px;
		}
	}
}
</style> 